import Taro, { Config } from '@tarojs/taro'
import { Image, View } from '@tarojs/components'
import Card from "../../components/Card/Card";

import './message.scss'

interface MState {
    messageList: any;
    messages: any;
}

export default class Message extends Taro.Component {

    /**
     * 指定config的类型声明为: Taro.Config
     *
     * 由于 typescript 对于 object 类型推导只能推出 Key 的基本类型
     * 对于像 navigationBarTextStyle: 'black' 这样的推导出的类型是 string
     * 提示和声明 navigationBarTextStyle: 'black' | 'white' 类型冲突, 需要显示声明类型
     */
    config: Config = {
        navigationBarTitleText: '消息'
    };

    state = {
        messageList: [],
        messages: []
    } as MState;

    constructor() {
        super();
        this.state = {
            messageList: [
                {title: '通知', describe: '我有一件事通知你', iconPath: 'http://diuber-guanche.oss-cn-shanghai.aliyuncs.com/IMG153026154279519604',},
                {
                    title: '粉丝',
                    describe: '在亿万光年里我们相遇',
                    iconPath: 'http://diuber-guanche.oss-cn-shanghai.aliyuncs.com/IMG153026180385015677',
                },
                {title: '喜欢', describe: '有趣的灵魂都在这里', iconPath: 'http://diuber-guanche.oss-cn-shanghai.aliyuncs.com/IMG153026189298512828',},
                {title: '收藏', describe: '再也不用遮遮掩掩了', iconPath: 'http://diuber-guanche.oss-cn-shanghai.aliyuncs.com/IMG153026198496436555',},
                {title: '评论', describe: '有时灵光一闪而过', iconPath: 'http://diuber-guanche.oss-cn-shanghai.aliyuncs.com/IMG153026204891027528',},
            ],
            messages: [
                {
                    name: 'test',
                    content: 'content',
                    ava: 'http://diuber-guanche.oss-cn-shanghai.aliyuncs.com/IMG153026204891027528',
                },
                {name: 'test', content: 'content?', ava: 'http://diuber-guanche.oss-cn-shanghai.aliyuncs.com/IMG153026204891027528',},
            ]
        }
    }

    componentWillMount() {
    }

    componentDidMount() {
    }

    componentWillUnmount() {
    }

    componentDidShow() {
    }

    componentDidHide() {
    }

    render() {
        const {messageList, messages} = this.state;
        return (
            <View className='container'>
                <View className="width-95" style={{'margin': '0 0 24px 0'}}>
                    {
                        messageList.map((item) =>
                            <Card title={null}>
                                <View className="message_list_item">
                                    <View>
                                        <Image src={item.iconPath}/>
                                    </View>
                                    <View>
                                        <View className="message_list_item_title">{item.title}</View>
                                        <View className="message_list_item_describe">{item.describe}</View>
                                    </View>
                                </View>
                            </Card>
                        )}
                </View>
                <View className="index_content">
                    <View className="index_title">全部私信</View>
                    <View className="index_direct_messages">
                        {
                            messages.map((item) =>
                                <View className="message_list_flex">
                                    <View>
                                        <Image src={item.ava}/>
                                    </View>
                                    <View>
                                        <View className="message_list_item_title">
                                            <View>{item.name}</View>
                                            <View className="message_list_item_time">2018年3月18日</View>
                                        </View>
                                        <View className="message_list_item_describe">{item.content}</View>
                                    </View>
                                </View>
                            )}
                    </View>
                </View>
            </View>
        )
    }
}
